<script setup lang="ts">
import { ref, toRef } from 'vue'
import useAppStore from '@/store'
import { onLoad } from '@dcloudio/uni-app';
import { getMemberProfile,MemberProfileResult,updateMemberProfile,Gender } from '@/api/profile';
import { useMemberStore } from '@/store/member';


const appStore = useAppStore()
const safeArea = toRef(appStore, 'safeArea')

const goBack = () => {
  uni.navigateBack({})
}

const currnetDate = ref(Date.now())

// 个人信息的数据对象
const memberStore=useMemberStore()
const memberProfile=ref({}as MemberProfileResult)
onLoad(async()=>{
  // 获取个人信息数据
  const res = await getMemberProfile()
  memberProfile.value = res
})

  // 选择头像
  const chooseImage = () => {
    uni.chooseImage({
    count:1,
    success:(res)=>{
      // res.tempFilePaths[0] 小程序的临时地址
      // 将小程序的临时地址上传给服务器,并得到在线的图片地址
     uni.uploadFile({
        url: "/member/profile/avatar",
        filePath: res.tempFilePaths[0],
        name: "file",
        success: (res) => {
          // console.log(JSON.parse(res.data).result.avatar);
          const avatar = JSON.parse(res.data).result.avatar;
          // 更换头像信息
          memberProfile.value.avatar = avatar;
          // 更新全局数据的头像信息
          memberStore.profile.avatar = avatar;
        },
      });
    },
  })
}

// 修改性别
const genderChange = (ev: WechatMiniprogram.RadioGroupChange) => {
  // console.log(ev.detail.value);
  memberProfile.value.gender = ev.detail.value as Gender;
};

// 修改出生日期
const birthdayChange=(ev: WechatMiniprogram.PickerChange)=>{
  // 修改出生日期数据
  memberProfile.value.birthday=ev.detail.value as string
}

// 修改城市
// 定义全局变量
let fullLocationCode: string[] = []
const fullLocationChange = (ev: WechatMiniprogram.PickerChange) => {
  // console.log(ev.detail);
  memberProfile.value.fullLocation = (ev.detail.value as string[]).join('')
  fullLocationCode = ev.detail.code
}
// 点击保存
const submitForm = async () => {
  const { nickname, profession,gender,birthday } = memberProfile.value;
  // 获取后端修改所需字段:省份编码,城市编码,区县编码
  const [provinceCode,cityCode,countyCode]=fullLocationCode
  await updateMemberProfile({
    nickname,
    profession,
    gender,
    birthday,
    provinceCode,
    cityCode,
    countyCode
  });
  uni.showToast({
    icon: "success",
    title: "修改成功",
  });
  // 同步修改store的昵称
  memberStore.profile.nickname=nickname
  // 返回上一页
  setTimeout(()=>{
    uni.navigateBack({})
  })

};
</script>

<template>
  <view class="viewport">
    <view class="navbar" :style="{ paddingTop: safeArea?.top + 'px' }">
      <view class="back icon-left" @tap="goBack"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar" @tap="chooseImage">
        <image
          :src="memberProfile.avatar"
          mode="aspectFill"
        />
        <text>点击修改头像</text>
      </view>
      <!-- 用户信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <text>{{ memberProfile.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input v-model="memberProfile.nickname" placeholder="请填写昵称" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="genderChange">
            <label class="radio">
              <radio value="男" color="#27ba9b" :checked="memberProfile.gender==='男'" /> 男
            </label>
            <label class="radio">
              <radio value="女" color="#27ba9b" :checked="memberProfile.gender === '女'"/> 女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker @change="birthdayChange" mode="date" start="1900-01-01" :end="currnetDate">
            <view>{{memberProfile.birthday || '请选择出生日期'}}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker mode="region" @change="fullLocationChange">
            <view>{{memberProfile.fullLocation||'请选择城市'}}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input  v-model="memberProfile.profession" placeholder="请填写职业" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm">保 存</view>
    </scroll-view>
  </view>
</template>

<style>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar .title {
  height: 40px;
  line-height: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.navbar .back {
  position: absolute;
  left: 20rpx;
  top: 22px;
  font-size: 23px;
  z-index: 9;
  color: #fff;
}

.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
}

.avatar image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar text {
  display: block;
  padding-top: 20rpx;
  line-height: 1;
  font-size: 26rpx;
  color: #fff;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 180rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item .radio {
  display: inline-block;
  height: 46rpx;
  margin-right: 20rpx;
  vertical-align: middle;
}

.form .form-item radio {
  transform: scale(0.7) translateY(-2px);
}

.form .form-item picker {
  flex: 1;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
